<script lang="ts" setup>
import { ref, onMounted,computed } from 'vue'
import { useAddPosition } from '../../store/addPosition';
import { useDepartmentSelectStore } from '../../store/departmentSelect';
import department from '../../api/department';
import position from '../../api/position';
import { FormInstance } from 'element-plus';
import utils from '../../utils/utils';
import { usePositionListStore } from '../../store/positionList';
const addPositionStore = useAddPosition();
const departmentSelectStore = useDepartmentSelectStore();
const positionListStore = usePositionListStore();
const ruleFormRef = ref<FormInstance>();
const rules = {
}
const text = computed(() => {
    return addPositionStore.positionAdd.id !== -1 ? '修改岗位' : '新增岗位'
})
// 配置树形组件属性
const treeProps = {
    value: 'value',
    label: 'label',
    children: 'children'
}
function failedSubmit() {
    addPositionStore.setIsOpen(false)
    addPositionStore.setPositionAddNull()
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            if (addPositionStore.positionAdd.id!==-1) {
                await position.updatePosition(addPositionStore.positionAdd).then(res => {
                    if (res.data.code == 200) {
                        utils.showMessage(res.data.message, 'success', 2000)
                    } else {
                        utils.showMessage("修改失败", 'error', 2000)
                    }
                }).catch(err => {
                    console.log(err)
                }).finally(() => {
                    addPositionStore.setPositionAddNull()
                })
            } else {
                addPositionStore.positionAdd.time = utils.getCurrentTime()
                await position.addPosition(addPositionStore.positionAdd).then(res => {
                    utils.showMessage(res.data.message, 'success', 1000)
                }).catch(err => {
                    utils.showMessage(err.response.data.message, 'error', 1000)
                }).finally(() => {
                    addPositionStore.setPositionAddNull()
                })
            }
            await position.getAllPosition(positionListStore.pageNum, positionListStore.pageSize).then(res => {
                positionListStore.setPositionList(res.data.data)
                positionListStore.total = res.data.total
                console.log(positionListStore.positionList)
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                addPositionStore.setIsOpen(false)
                positionListStore.changeLoading()
            })
        }
    })
}
onMounted(async () => {
    await department.getDepartmentSelect().then((res) => {
        departmentSelectStore.setDepartmentSelect(res.data.data);
    }).catch((err) => {
        console.log(err);
    })
});
</script>
<template>
    <el-dialog v-model="addPositionStore.isOpen" :title="text" width="600" center>
        <el-form ref="ruleFormRef" :model="addPositionStore.positionAdd" :rules="rules" label-width="100px"
            class="demo-ruleForm">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="岗位名称：" prop="positionName" width="240px">
                        <el-input v-model="addPositionStore.positionAdd.positionName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称：" prop="deptId" width="240px">
                        <el-tree-select :props="treeProps" v-model="addPositionStore.positionAdd.deptId" check-strictly
                            clearable :data="departmentSelectStore.departmentSelect" :render-after-expand="false"
                            class="form-control" placeholder="请选择部门" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="编制人数：" prop="maxHeadcount" width>
                        <el-input-number :min="0" :max="20" v-model="addPositionStore.positionAdd.maxHeadcount"
                            placeholder="请输入最大人数" />
                    </el-form-item>
                    <el-form-item label="状态：" prop="status">
                        <el-radio-group v-model="addPositionStore.positionAdd.status">
                            <el-radio :value=1>启用</el-radio>
                            <el-radio :value=0>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="responsibility">
                        <el-input type="textarea" v-model="addPositionStore.positionAdd.responsibility"
                            placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="failedSubmit">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>
.demo-ruleForm {
    padding: 1rem;
}
</style>